<template>
	<view class="cart-root">
		<com-nav-bar @clickLeft="back" left-icon="back" title="账单支付" :status-bar="true" background-color="#fcc80e" :border="false"
		 color="#ffffff"></com-nav-bar>
		<view class="cart-bg" :style="{backgroundColor:'#fcc80e'}"></view>
		<view class="mainContent">
			<view class="up">
				
				<view class="balance">
					<text>账户余额:</text>
					<view>￥{{payData.balance}}</view>
				</view>
				<view class="balance">
					<text>账户红包:</text>
					<view>{{payData.static_integral}}</view>
				</view>
				<view class="balance">
					<text>恒信通余额:</text>
					<view>￥{{payData.hxtBalance}}</view>
				</view>
				<view class="balance">
					<text>订单编号:</text>
					<view>{{payData.orderNo}}</view>
				</view>
				<view class="balance">
					<text>订单金额:</text>
					<view>￥{{parseFloat(order.order_price)}}</view>
				</view>
				<view class="balance">
					<text>服务费:</text>
					<view>￥{{parseFloat(payData.service_fee)}}</view>
				</view>
				
				<view class="balance">
					<text>总计:</text>
					<view><text class="price" style='font-weight: 600;'>￥{{parseFloat(order.pay_price)}}</text></view>
				</view>
				
				<view class="balance" style="display: flex;align-items: center;">
					<view>使用红包:</view>
					<view style="display: flex;align-items: center;">
						<view v-if='use_integral == 1' style="color: red;"> - {{parseFloat(order.integral_deduction_price)}}</view>
						<switch :checked="use_integral == 1" @change="useIntegral" class="points-switch" style="transform:scale(0.7)" color="#fcc80e" />
					</view>
					
				</view>

			</view>
			
			<view class="down">
				<view class="down-item" v-for="(item,index) in payData.supportPayTypes" :key="index">
					<view class="item-left">
						<image class="item-img" :src="img_url+'images/pay/'+item+'.png'" mode=""></image>
						<text v-if="item == 'hxtOpenPay'">收银台支付</text>
						<text v-if="item == 'hxtBalancePay'">恒信通余额支付</text>
						<text v-if="item == 'balance'">余额支付</text>
					</view>
					<view class="item-right-box" @tap="switchIcon(index)">
						<view v-if="index == switchIndex" class="item-icon iconfont icon-dagou1" :style="{color:'#fcc80e'}"></view>
						<view v-else class="item-right"></view>
					</view>
				</view>
			</view>

			<view class="confirmPay" :style="{background:'#fcc80e'}" @click="confirmPay">确认支付</view>
		</view>
		<com-bottom-popup :show="popupShow">
			<view class="tui-popup-box" style="border-radius: 20rpx;">
				<scroll-view scroll-y class="tui-popup-scroll">
					<view class="tui-scrollview-box">
						<view style="text-align:center;">选择支付方式</view>
						<view class="uni-title uni-common-mt uni-common-pl">选择银行卡</view>
						<view class="uni-list">
							<radio-group @change="radioChange">
								<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in payData.hjBank" :key="item.sign_no">
									<view style="margin:10rpx 0;">
										<text>
											<radio :value="item.sign_no" color="green" :checked="index === current" />
										</text>
										<text> {{bankName[item.bank_code].name}}({{endNumber(item.bank_card_no)}})</text>
									</view>
								</label>
							</radio-group>
						</view>
					</view>
				</scroll-view>
				<view class="tui-operation tui-operation-right tui-right-flex tui-popup-btn">
					<view class="confirmPay" :style="{background:'#FF7104'}" @tap="determine">确定</view>
				</view>
			</view>
		</com-bottom-popup>
		<com-modal :show="modal" @click="handleClick" @cancel="hide()" title="提示"
			content="您没有设置支付密码,是否需要跳转设置？"></com-modal>
		<com-payment-password ref="paymentPassword" :show="cashFlag" :value="paymentPwd" :digits="6" @submit="checkPwd"
			@cancel="togglePayment" @checkSafePwd="safePasswork"></com-payment-password>
	</view>
</template>

<script>
	// #ifdef H5
	var jweixin = require('jweixin-module');
	// #endif
	// #ifdef MP-WEIXIN || APP-PLUS
	import {
		setPay
	} from '@/config/utils.js'
	// #endif
	import {bankName} from "@/utils/util.js"
	export default {
		data() {
			return {
				img_url: this.$api.img_url,
				showBool: false, // 固定定位状态栏占位
				opacity: 0,
				payData:{
					supportPayTypes:[],
					balance:0,
					static_integral:0,
					service_fee: 0,
					hxtBalance: 0
				},
				order:{
					order_no:'',
					order_price:0,
					pay_price:0,
					integral_deduction_price:0,
					integral_fee_rate:0
				},
				switchIndex: 0,
				id: '', //结账ID
				use_integral: 0, //折扣卷使用数量
				sign: '',
				popupShow:false,
				sign_no:'',
				current: 0,
				bankName: bankName(),
				is_transaction_password:'',
				modal:false,
				cashFlag:false,
				paymentPwd:'',
				requestFlag:false,
			}
		},
		computed: {
			endNumber() {
				return (cardCode) => {
					let length = cardCode.length;
					return cardCode.substr(length - 4, length);
				} 
			}
		},
		onLoad(options) {
			if (options.id) {
				this.id = options.id
			}
			this.getPayData()
		},
		methods: {
			useIntegral(e){
				this.use_integral = e.detail.value ? 1 : 0 
				if(e.detail.value){
					this.switchIndex = this.payData.supportPayTypes.indexOf('balance')
				}
				this.getPayData()
			},
			
			
			togglePayment() {
				this.cashFlag = false;
			},
			safePasswork(e) {
				let that = this;
				uni.showLoading({
					title: '校验安全密码中'
				});
				this.$http.request({
					url: this.$api.hj.transactionPassword,
					method: 'POST',
					data: {transaction_password:e.passwork},
					showLoading: true
				}).then(res => {
					this.$refs.paymentPassword.modalFun('hide');
					if (res.code == 0) {
						that.$http.request({
							url: that.$api.moreShop.hjAgreementPay,
							showLoading: true,
							method: 'post',
							data: {
								union_id: that.payData.union_id,
								sign_no:that.sign_no
							}
						}).then(res=>{
							if(res.code==0){
								that.$http.toast('支付成功!');
								if(that.payData.is_send==1){
									setTimeout(() => {
										// #ifdef APP-PLUS
											uni.navigateTo({
												url: '/pages/order/beused/beused'
											})
										// #endif
										// #ifdef H5||MP-WEIXIN
											uni.redirectTo({
												url: '/pages/order/beused/beused'
											})
										// #endif
									},700)
								}else{
									setTimeout(() => {
										
										// #ifdef APP-PLUS
											uni.navigateTo({
												url: '/pages/order/list?status=1'
											})
										// #endif
										
										// #ifdef H5||MP-WEIXIN
											uni.redirectTo({
												url: '/pages/order/list?status=1'
											})
										// #endif
									},500)
								}
								return;
							}else{
								that.$http.toast(res.msg)
							}
							
						})
					} else {
						this.$http.toast(res.msg);
					}
				});
			},
			checkPwd(e){
				console.log({e});
			},
			initSetting() {
				this.$http
					.request({
						url: this.$api.plugin.extensions.integral_cash.setting
					})
					.then(res => {
						if (res.code == 0) {
							this.is_transaction_password = res.data.user_info.is_transaction_password;
						} else {
							this.$http.toast(res.msg);
						}
					});
			},
			hide(){
				this.modal = false
			},
			handleClick(e) {
				let index = e.index;
				if (index === 0) {
					this.modal = false;
				} else {
					uni.navigateTo({
						url: '/pages/user/payment/password'
					})
				}
				this.hide();
			},
			radioChange: function(evt) {
				for (let i = 0; i < this.payData.hjBank.length; i++) {
					if (this.payData.hjBank[i].sign_no === evt.detail.value) {
						this.current = i;
						break;
					}
				}
			},
			determine(){
				if(this.payData.hjBank.length>0){
					this.sign_no = this.payData.hjBank[this.current].sign_no;
				}
				
				this.popupShow = false;
			},
			hidePopup() { //关闭弹窗
				this.popupShow = false;
			},
			back() {
				this.navBack();
			},
			async getPayData(is_save=0) { //获取支付信息
				let pay_type = this.payData.supportPayTypes[this.switchIndex] ?? '';
				let res = await this.$http.request({
					url: this.$api.moreShop.getpayINfo,
					data: {
						id: this.id,
						use_integral: this.use_integral,
						pay_type,
						is_save
					},
					showLoading: true,
				});
				if (res.code == 0) {
					this.payData = res.data;
					this.order = res.data.detail;
				}else{
					this.$http.toast(res.msg)
				}
			},
			switchIcon(index) { //支付模式切换
				this.switchIndex = index;
				if( this.payData.supportPayTypes[this.switchIndex] != 'balance' ){
					this.useIntegral({detail:{value:false}});
				}else{
					this.getPayData();
				}
				
				// if(this.payData.supportPayTypes[this.switchIndex]=='hjAgreementPay'){
				// 	if(!(this.payData.hjBank.length>0)){
				// 		uni.navigateTo({
				// 			url: '/pages/user/bindBank/addBank'
				// 		})
				// 	}else{
				// 		this.popupShow = true;
				// 	}
					
				// }
				
			},
			async confirmPay() { // 请求支付接口，如果是余额支付
				let that = this;
				
				this.getPayData(1);

				if(that.payData.supportPayTypes[that.switchIndex]=='hxtOpenPay'){
					let res = await that.$http.request({
						url: that.$api.hxt.hxtOpenPay,
						showLoading: true,
						method: 'post',
						data: {
							union_id: that.payData.union_id,
						}
					})
					if(res.code==0){
						window.location.href = res.data.code_url;
					}else{
						that.$http.toast(res.msg)
					}
				}
			
				if(that.payData.supportPayTypes[that.switchIndex]=='hxtBalancePay'){
					if(that.requestFlag){
						return ;
					}
					that.requestFlag = true;
					let res = await that.$http.request({
						url: that.$api.hxt.hxtBalancePay,
						showLoading: true,
						method: 'post',
						data: {union_id: that.payData.union_id}
					});
					if(res.code != 0){
						that.requestFlag = false;
						that.$http.toast(res.msg);return;
					}
					that.$http.toast('支付成功');
					setTimeout(() => {
						that.requestFlag = false;
						uni.navigateTo({
							url: '/pages/order/list?status=1'
						})
					},1000)
				}
				
				if(that.payData.supportPayTypes[that.switchIndex]=='balance'){
					let res = await that.$http.request({
						url: that.$api.moreShop.balancepay,
						showLoading: true,
						method: 'post',
						data: {
							union_id: that.payData.union_id,
						}
					});
					if(res.code==0){
						uni.showModal({
							title: '恭喜你！',
							content: '支付成功',
							showCancel:false,
							success: function (resSure) {
								if (resSure.confirm) {
									uni.redirectTo({
										url:'/pages/index/index'
									})
								} 
							}
						});
						return;
					}else{
						that.$http.toast(res.msg)
					}
				}
			}
		},
	}
</script>

<style scoped>
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	.status_bar2 {
		height: var(--status-bar-height);
		width: 100%;
		position: fixed;
		top: 0;
		z-index: 99;
	}

	body,
	page {
		background-color: $uni-bg-color-grey;
	}

	.cart-root {
		position: relative;
		z-index: 1;
	}

	.cart-bg {
		position: absolute;
		width: 100%;
		background-size: cover;
		height: 320rpx;
		box-shadow: 0 1rpx 10rpx inset;
	}

	.cart-bg-img {
		width: 100%;
	}

	.cart-title {
		padding: 40rpx 0 0rpx;
		color: #FFFFFF;
		font-size: 14pt;
		letter-spacing: 4rpx;
		text-align: center;
		position: relative;
		margin-bottom: 40rpx;
	}

	.back {
		position: absolute;
		top: 40rpx;
		left: 30rpx;
		font-size: 40rpx;
	}

	.mainContent {
		z-index: 999;
		position: relative;
		width: 690rpx;
		margin: 118rpx auto 0;
	}

	.up {
		background: #FFFFFF;
		border-radius: 15rpx;
		margin-bottom: 30rpx;
	}

	.balance {
		display: flex;
		justify-content: space-between;
		padding: 30rpx 23rpx;
		font-size: 10pt;
		color: #000000;
		border-bottom: 2rpx solid #F2F2F2;
	}

	.price {
		font-size: 13pt;
		margin-right: 10rpx;
	}

	.pay-content {
		padding: 43rpx 0;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.pay-title {
		font-size: 9pt;
		font-weight: 600;
		margin-bottom: 20rpx;
		color: #000000;
	}

	.pay-icon {
		font-size: 12pt;
		margin-right: 20rpx;
		font-weight: 500;
	}

	.pay-price {
		color: #BC0100;
		font-size: 16pt;
		font-weight: 600;
		margin-bottom: 20rpx;
	}

	.numbering {
		font-size: 10pt;
		color: #000000;
	}

	.down {
		background: #FFFFFF;
		border-radius: 15rpx;
		padding: 40rpx 20rpx;
	}

	.down-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 40rpx;
	}

	.down .down-item:last-child {
		margin-bottom: 0rpx;
	}

	.item-left {
		display: flex;
		align-items: center;
		color: #000000;
		font-size: 10pt;
	}

	.item-img {
		width: 40rpx;
		height: 40rpx;
		margin-right: 30rpx;
	}

	.item-right-box {
		width: 38rpx;
		height: 38rpx;
		position: relative;
	}

	.item-right {
		width: 38rpx;
		height: 38rpx;
		border-radius: 50%;
		border: 2rpx solid #8B8B8B;
		position: absolute;
	}

	.item-icon {
		font-size: 38rpx;
		position: absolute;
		top: 0rpx;
		left: 0rpx;
		line-height: 40rpx;
		color: #BC0100;
	}

	.confirmPay {
		color: #FFFFFF;
		background: #bc0100;
		padding: 26rpx 0;
		text-align: center;
		border-radius: 80rpx;
		font-size: 10pt;
		letter-spacing: 4rpx;
		margin-top: 80rpx;
	}
	/*底部选择弹层*/
	

	.tui-popup-box {
		position: relative;
		padding: 30rpx 0 100rpx 0;
	}

	.tui-popup-btn {
		width: 100%;
		position: absolute;
		left: 0;
		bottom: 0;
	}

	.tui-icon-close {
		position: absolute;
		top: 30rpx;
		right: 30rpx;
	}

	.tui-product-box {
		display: flex;
		align-items: center;
		font-size: 9pt;
		padding-bottom: 30rpx;
	}

	.tui-popup-img {
		height: 200rpx;
		width: 200rpx;
		border-radius: 24rpx;
		display: block;
	}

	.tui-popup-price {
		padding-left: 20rpx;
		padding-bottom: 8rpx;
		flex: 1;
	}

	.tui-amount {
		color: #ff201f;
		font-size: 14pt;
	}

	.tui-number {
		font-size: 9pt;
		line-height: 28rpx;
		padding-top: 12rpx;
		color: #999;
	}

	.tui-popup-scroll {
		height: 1300rpx;
		font-size: 10pt;
	}

	.tui-scrollview-box {
		padding: 0 30rpx 60rpx 30rpx;
		box-sizing: border-box;
	}

	.tui-attr-title {
		padding: 10rpx 0;
		color: #333;
	}

	.tui-attr-box {
		font-size: 0;
		padding: 20rpx 0;
	}

	.tui-attr-item {
		max-width: 100%;
		min-width: 200rpx;
		height: 64rpx;
		display: -webkit-inline-flex;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		background: #f7f7f7;
		padding: 0 26rpx;
		box-sizing: border-box;
		border-radius: 10rpx;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
		font-size: 9.5pt;
	}

	.tui-attr-active {
		font-weight: bold;
		position: relative;
		border-radius: 10rpx;
	}


	.tui-number-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 0 30rpx 0;
		box-sizing: border-box;
	}

	/*底部选择弹层*/
</style>
